<template>
	<div class="login-wrap">
		<div class="ms-login">
			<div class="ms-title">智慧农业数据采集平台</div>
			<!-- 登录表单 -->
			<el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" placeholder="username">
						<template #prepend>
							<el-button icon="el-icon-user"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input type="password" placeholder="password" v-model="loginForm.password"
						@keyup.enter="submitForm()">
						<template #prepend>
							<el-button icon="el-icon-lock"></el-button>
						</template>
				 </el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
			<!-- <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="username">
						<template #prepend>
							<el-button icon="el-icon-user"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="password" v-model="param.password"
						@keyup.enter="submitForm()">
						<template #prepend>
							<el-button icon="el-icon-lock"></el-button>
						</template>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm()">登录</el-button>
				</div>
				<p class="login-tips">commit : 相应的管理员对应相应的农作物</p>
			</el-form> -->
		</div>
	</div>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue";
	import {
		useStore
	} from "vuex";
	import {
		useRouter
	} from "vue-router";
	import {
		ElMessage
	} from "element-plus";
	import {
		login
	} from "../api/index.js"

	export default {
		data() {
			return {
				//数据绑定
				loginForm: {
					username: "admin",
					password: "123456",
				},
				//表单验证规则
				loginFormRules: {
					username: [{
							required: true,
							message: "请输入登录名",
							trigger: "blur"
						},
						{
							min: 3,
							max: 10,
							message: "登录名长度在 3 到 10 个字符",
							trigger: "blur",
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 15,
							message: "密码长度在 6 到 15 个字符",
							trigger: "blur",
						},
					],
				},
			};
		},
		//添加行为，
		methods: {
			//添加表单重置方法
			resetLoginForm() {
				//this=>当前组件对象，其中的属性$refs包含了设置的表单ref
				// console.log(this)
				this.$refs.LoginFormRef.resetFields();
			},
			login() {
				// 点击登录的时候先调用validate方法验证表单内容是否有误
				this.$refs.LoginFormRef.validate(async (valid) => {
					// console.log(this.loginFormRules)
					//如果valid参数为true则验证通过
					if (!valid) {
						return;
					}
					const that = this;
					//发送请求进行登录
					login(this.loginForm).then(res => {
						if (res.statusCode !== 0) {
							console.log("dadadadad")
							ElMessage.error("登录失败:" + res.msg); //console.log("登录失败:"+res.meta.msg)
						}
						console.log(res);
						console.log(res.rst.token);
						localStorage.setItem("user_pic",res.rst.user.userPic);
						localStorage.setItem("user_id",res.rst.user.userId);
						localStorage.setItem("ms_username", that.loginForm.username);
						//保存token到sessionStorage中
						window.sessionStorage.setItem("token", res.rst.token);
						// 导航至/home
						this.$router.push("/");
						ElMessage.success("登录成功");
					});
					// const {
					// 	data: res
					// } = await this.$http.post("login", this.loginForm);
					// //   console.log(res);
					// if (res.meta.status !== 200) {
					// 	return this.$message.error("登录失败:" + res.meta.msg); //console.log("登录失败:"+res.meta.msg)
					// }

					// this.$message.success("登录成功");
					// console.log(res);
					// //保存token到sessionStorage中
					// window.sessionStorage.setItem("token", res.data.token);
					// // 导航至/home
					// this.$router.push("/home");
				});


			},
		},
	};

	// 	setup() {
	// 		const router = useRouter();
	// 		const param = reactive({
	// 			username: "admin",
	// 			password: "123456",
	// 		});

	// 		const rules = {
	// 			username: [{
	// 				required: true,
	// 				message: "请输入用户名",
	// 				trigger: "blur",
	// 			}, ],
	// 			password: [{
	// 				required: true,
	// 				message: "请输入密码",
	// 				trigger: "blur"
	// 			}, ],
	// 		};
	// 		const login = ref(null);
	// 		const submitForm = () => {
	// 			login(param).then(res =>{
	// 				login.value.validate((valid) => {
	// 					if (valid) {
	// 						ElMessage.success("登录成功");
	// 						localStorage.setItem("ms_username", param.username);
	// 						router.push("/");
	// 					} else {
	// 						ElMessage.error("登录成功");
	// 						return false;
	// 					}
	// 				});
	// 			});

	// 		};

	// 		const store = useStore();
	// 		store.commit("clearTags");

	// 		return {
	// 			param,
	// 			rules,
	// 			login,
	// 			submitForm,
	// 		};
	// 	},
	// };
</script>

<style scoped>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../assets/img/bpic7421.jpg);
		background-size: 100%;
	}

	.ms-title {
		width: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		border-bottom: 1px solid #ddd;
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 350px;
		margin: -190px 0 0 -175px;
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		overflow: hidden;
	}

	.ms-content {
		padding: 30px 30px;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}
</style>
